<template>
<a v-if="disable" class="disable">
     <slot>
            <Icon v-if="type=='icon'" :type="icon" :color="colors" />
            <span v-else="type=='text'" v-text="text"></span>
     </slot>
</a>
<Tooltip trigger="hover" v-else-if="title" :content="titles" placement="top-end">
    <a class="op" :class="css" @click="handler">
        <slot>
            <Icon v-if="type=='icon'" :type="icon" :color="colors" />
            <span v-else="type=='text'" v-text="text"></span>
        </slot>
    </a>
</Tooltip>
<a class="op" v-else :class="css" @click="handler">
    <slot>
        <Icon v-if="type=='icon'" :type="icon" :color="colors" />
        <span v-else="type=='text'" v-text="text"></span>
    </slot>
</a>
</template>

<script>
export default {
    name: "op",
    props: {
        icon: {
            type: String
        },
        oprate: {
            type: String
        },
        type: {
            type: String,
            default: "text"
        },
        title: {
            type: String,
        },
        msg: {
            type: String,
            default: "确认要删除吗？"
        },
        color: {
            type: String
        },
        disable: {
            type: Boolean,
            default: false
        },

    },
    data() {
        return {
            text: "",
            css: "view",
            colors: this.color,
            titles: this.title,
            disabled:false,
        };
    },
    created() {
        var oprates = {
            detail: "查看",
            edit: "编辑",
            add: "添加",
            delete: "删除",
            remove: "删除"
        };

        if (this.type == "icon") {
            this.css = "icon";
        } else if (this.oprate == "delete" || this.oprate == "remove"){
            this.css ="confirm"
        }

    },
    mounted() {

        if (this.disable) {
            this.colors = "#ccc";
            this.titles = ''
        }
    },
    methods: {
        handler() {
            if (this.disable == 0) {
                if (this.oprate == "delete" || this.oprate == "remove") {
                    this.$Modal.confirm({
                        title: this.title,
                        content: "<p>" + this.msg + "</p>",
                        onOk: () => {
                            this.$emit("click", event);
                        }
                    });
                } else {
                    this.$emit("click", event);
                }
            }
        }
    },
    watch: {
        v() {},
        disable(v) {
            if (v) {
                this.colors = "#ccc";
                this.titles = '';
            } else {
                this.colors = this.color;
                this.titles = this.title;

            }
            this.disable = v
        },
        color(v) {
            if (v && v != '') {
                this.colors = v
            }

        },
        title(v) {
            if (v && v != '') {
                this.titles = v
            }
        },
    },
};
</script>
